﻿<UserControl x:Class="BlogWriter.Wpf.Views.UserBlogsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:dp="clr-namespace:BlogWriter.Wpf.DependencyProperties"
             xmlns:v="clr-namespace:BlogWriter.Wpf.Views"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             Style="{StaticResource {x:Type UserControl}}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="3" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.InputBindings>
            <KeyBinding Key="Delete" Command="{Binding DeleteBlogCommand}" />
        </Grid.InputBindings>

        <!-- USER'S BLOGS -->
        <ContentControl Style="{StaticResource SlidingPage}" 
                        dp:ContentControl.IsActive="{Binding OpenedBlog, Converter={StaticResource IsNullConverter}, FallbackValue=False}">
            <Grid>
                <ListView 
                    ItemsSource="{Binding UserBlogs}" 
                    IsSynchronizedWithCurrentItem="True"
                    ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                    <ListView.Resources>
                        <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="BorderBrush" Value="Transparent" />
                            <Setter Property="Opacity" Value="0.8" />
                            <Style.Triggers>
                                <Trigger Property="IsFocused" Value="True">
                                    <Setter Property="Background" Value="White" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ListView.Resources>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemContainerStyle>
                        <Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">
                            <Setter Property="Margin" Value="2" />
                            <Setter Property="Padding" Value="0" />
                            <Style.Triggers>
                                <Trigger Property="IsKeyboardFocusWithin" Value="True">
                                    <Setter Property="IsSelected" Value="True" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ListView.ItemContainerStyle>
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseDoubleClick">
                            <i:InvokeCommandAction Command="{Binding DataContext.OpenBlogCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Border Width="200" Height="200" Margin="-1" Padding="0" BorderBrush="Gray" BorderThickness="1">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" MinHeight="20" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <TextBox Grid.Row="0" Margin="3" Text="{Binding Title, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" FontWeight="SemiBold" Style="{StaticResource MultiLineTextBox}">
                                        <dp:CueBanner.Content>
                                            <TextBlock Text="&lt;Blog title&gt;" FontStyle="Italic" />
                                        </dp:CueBanner.Content>
                                    </TextBox>
                                    <TextBox Grid.Row="1" Margin="3" Text="{Binding Description, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" Style="{StaticResource MultiLineTextBox}">
                                        <dp:CueBanner.Content>
                                            <TextBlock Text="&lt;Blog description&gt;" FontStyle="Italic" />
                                        </dp:CueBanner.Content>
                                    </TextBox>
                                    <TextBlock Grid.Row="2" Margin="3">Created <Run Text="{Binding CreatedDate, Mode=OneWay}" /></TextBlock>
                                    <Border Grid.Row="2" Margin="2" Padding="0" HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="1" ToolTip="Delete">
                                        <Border.Style>
                                            <Style TargetType="{x:Type Border}">
                                                <Style.Triggers>
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Setter Property="Background" Value="#50FF7200" />
                                                    </Trigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Border.Style>
                                        <TextBlock Margin="0" Padding="4 -1 5 -5" Text="x" FontSize="14" FontFamily="Arial Rounded MT Bold" Foreground="Red" />
                                        <i:Interaction.Triggers>
                                            <i:EventTrigger EventName="MouseLeftButtonUp">
                                                <i:InvokeCommandAction Command="{Binding DataContext.DeleteBlogCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}" />
                                            </i:EventTrigger>
                                        </i:Interaction.Triggers>
                                    </Border>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <Viewbox Style="{StaticResource Watermark}">
                    <TextBlock Text="BLOGS" />
                </Viewbox>
            </Grid>
        </ContentControl>
        <!-- BLOG POSTS -->
        <ContentControl Style="{StaticResource SlidingPage}">
            <dp:ContentControl.IsActive>
                <MultiBinding Converter="{StaticResource BooleanAndConverter}">
                    <Binding Path="OpenedBlog" Converter="{StaticResource IsNotNullConverter}" FallbackValue="False" />
                    <Binding Path="OpenedPost" Converter="{StaticResource IsNullConverter}" FallbackValue="False" />
                </MultiBinding>
            </dp:ContentControl.IsActive>
            <ContentControl.Content>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Button Content="&lt;" Margin="2 2 0 0" Padding="0" Command="{Binding CloseBlogCommand}" BorderBrush="Gray" BorderThickness="1" ToolTip="Close this blog and show all blogs" />
                    <Grid Grid.Column="1" DataContext="{Binding OpenedBlog}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBox Grid.Row="0" Margin="3 3 3 0" Text="{Binding Title, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" FontWeight="SemiBold" Style="{StaticResource MultiLineTextBox}" AcceptsReturn="False">
                            <dp:CueBanner.Content>
                                <TextBlock Text="&lt;Blog title&gt;" FontStyle="Italic" />
                            </dp:CueBanner.Content>
                        </TextBox>
                        <TextBox Grid.Row="1" Margin="3 3 3 0" Text="{Binding Description, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" Style="{StaticResource MultiLineTextBox}">
                            <dp:CueBanner.Content>
                                <TextBlock Text="&lt;Blog description&gt;" FontStyle="Italic" />
                            </dp:CueBanner.Content>
                        </TextBox>
                        <ListView Grid.Row="3" Margin="0 3 0 0" Padding="0" BorderBrush="Transparent" BorderThickness="0" ItemsSource="{Binding Posts}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseDoubleClick">
                                    <i:InvokeCommandAction Command="{Binding DataContext.OpenPostCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <Border BorderBrush="Gray" Margin="-3 -1" Padding="0" BorderThickness="1" HorizontalAlignment="Stretch">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <TextBox Grid.Row="0" Margin="1" Text="{Binding Title}" FontWeight="SemiBold" Style="{StaticResource ReadOnlyTextBox}" IsHitTestVisible="False">
                                                <dp:CueBanner.Content>
                                                    <TextBlock Text="&lt;Post title&gt;" FontStyle="Italic" />
                                                </dp:CueBanner.Content>
                                            </TextBox>
                                            <TextBox Grid.Row="1" Grid.ColumnSpan="2" Margin="1" Text="{Binding Abstract}" Style="{StaticResource ReadOnlyTextBox}" IsHitTestVisible="False">
                                                <dp:CueBanner.Content>
                                                    <TextBlock Text="&lt;Abstract&gt;" FontStyle="Italic" />
                                                </dp:CueBanner.Content>
                                            </TextBox>
                                            <Border Grid.Row="0" Grid.Column="1" Margin="2" Padding="0" HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="1" ToolTip="Delete">
                                                <Border.Style>
                                                    <Style TargetType="{x:Type Border}">
                                                        <Style.Triggers>
                                                            <Trigger Property="IsMouseOver" Value="True">
                                                                <Setter Property="Background" Value="#50FF7200" />
                                                            </Trigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Border.Style>
                                                <TextBlock 
                                                Text="x" 
                                                Margin="0" Padding="3 -3 3 0" 
                                                FontSize="14" FontFamily="Arial Rounded MT Bold" Foreground="Red" />
                                                <i:Interaction.Triggers>
                                                    <i:EventTrigger EventName="MouseLeftButtonUp">
                                                        <i:InvokeCommandAction Command="{Binding DataContext.DeletePostCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" CommandParameter="{Binding}"/>
                                                    </i:EventTrigger>
                                                </i:Interaction.Triggers>
                                            </Border>
                                        </Grid>
                                    </Border>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                    <Viewbox Style="{StaticResource Watermark}">
                        <TextBlock Text="POSTS" />
                    </Viewbox>
                </Grid>
            </ContentControl.Content>
        </ContentControl>
        <!-- POST -->
        <ContentControl Style="{StaticResource SlidingPage}"
                        dp:ContentControl.IsActive="{Binding OpenedPost, Converter={StaticResource IsNotNullConverter}, FallbackValue=False}">
            <ContentControl.Content>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Button Content="&lt;" Margin="2 2 0 0" Padding="0" Command="{Binding ClosePostCommand}" BorderBrush="Gray" BorderThickness="1" ToolTip="Close this blog post and show all posts of current blog" />
                    <Grid Grid.Column="1" DataContext="{Binding OpenedPost}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBox Grid.Row="0" Margin="3 3 3 0" Text="{Binding Title, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" FontWeight="SemiBold" Style="{StaticResource MultiLineTextBox}" AcceptsReturn="False">
                            <dp:CueBanner.Content>
                                <TextBlock Text="&lt;Post title&gt;" FontStyle="Italic" />
                            </dp:CueBanner.Content>
                        </TextBox>
                        <TextBox MaxHeight="80" Grid.Row="1" Margin="3 3 3 0" Text="{Binding Abstract, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" Style="{StaticResource MultiLineTextBox}">
                            <dp:CueBanner.Content>
                                <TextBlock Text="&lt;Post abstract&gt;" FontStyle="Italic" />
                            </dp:CueBanner.Content>
                        </TextBox>
                        <TextBox Grid.Row="2" Margin="3 3 3 0" Text="{Binding Content, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" Style="{StaticResource MultiLineTextBox}">
                            <dp:CueBanner.Content>
                                <TextBlock Text="&lt;Content&gt;" FontStyle="Italic" />
                            </dp:CueBanner.Content>
                        </TextBox>
                    </Grid>
                    <Viewbox Style="{StaticResource Watermark}">
                        <TextBlock Text="POST" />
                    </Viewbox>
                </Grid>
            </ContentControl.Content>
        </ContentControl>
        
        <Grid Grid.ColumnSpan="99" Grid.Row="2" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="5" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="5" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" MinWidth="5" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="New Blog" Command="{Binding CreateNewBlogCommand}" Visibility="{Binding OpenedBlog, Converter={StaticResource VisibleIfNullConverter}, ConverterParameter={x:Static Visibility.Hidden}}" />
            <Button Grid.Column="0" Content="New Post" Command="{Binding CreateNewPostCommand}" Visibility="{Binding OpenedBlog, Converter={StaticResource VisibleIfNotNullConverter}, ConverterParameter={x:Static Visibility.Hidden}}" />
            <Button Grid.Column="2" Content="Save" Command="{Binding SaveCommand}" />
            <Button Grid.Column="4" Content="Cancel" Command="{Binding CancelCommand}" /> 
            <Button Grid.Column="6" Content="Logout" Command="{Binding LogoutCommand}" />
        </Grid>
    </Grid>
</UserControl>
